<template>
	<view class="my-view">
		<!-- 用户信息区域 -->
		<view class="user">
			<view class="info">
				<template v-if="userinfo.nickName">
					<image :src="avatarUrl" mode=""></image>
					<view class="user-desc">
						<text>昵称: {{ userinfo.nickName }}</text>
						<text>登录名: {{ userinfo.loginName }}</text>
						<text class="name">个性签名: {{ userinfo.introduceSign }}</text>
					</view>
				</template>
				<template v-else>
					<image src="../../static/0.jpg" mode=""></image>
					<view class="login-text" @click="goLogin">登录 / 注册</view>
				</template>
			</view>
		</view>

		<!-- 用户操作列表区域 -->
		<view class="user-list">
			<view class="item van-hairline--bottom">
				<text>我的订单</text>
				<van-icon name="arrow" />
			</view>
			<view class="item van-hairline--bottom">
				<text>账号管理</text>
				<van-icon name="arrow" />
			</view>
			<view class="item van-hairline--bottom">
				<text>地址管理</text>
				<van-icon name="arrow" />
			</view>
			<view class="item van-hairline--bottom">
				<text>关于我们</text>
				<van-icon name="arrow" />
			</view>
		</view>

		<!-- 退出按钮 -->
		<van-button v-if="userinfo.nickName" round block color="#1baeae" @click="logout">退出登录</van-button>
	</view>
</template>

<script setup>
// 用户信息加载逻辑:  1. 登录   2.  页面渲染后
import { UserStore } from '../../store/user'
import { storeToRefs } from 'pinia'
import { onMounted } from 'vue'
const userStore = UserStore()

onMounted(async () => {
	// 判断用户是否登录
	if (userStore.token) {
		// 拉取用户信息
		userStore.getUserinfo()
	}
})

// * 跳转登录
const goLogin = () => {
	uni.navigateTo({ url: '/subpkg/login/login' })
}

// * 用户退出登录
const logout = () => {
	uni.showModal({
		title: '提示',
		content: '你是否要登录?',
		success: ({ confirm }) => {
			if (!confirm) return
			userStore.userLogout()
		}
	})
}

const { avatarUrl, userinfo } = storeToRefs(userStore)
</script>

<style lang="scss">
.user {
	width: 94%;
	margin: 20rpx;
	height: 230rpx;
	background: linear-gradient(90deg, $pc, #51c7c7);
	box-shadow: 0 4rpx 10rpx #269090;
	border-radius: 12rpx;

	.info {
		position: relative;
		display: flex;
		width: 100%;
		height: 100%;
		padding: 50rpx 40rpx;
		box-sizing: border-box;
		align-items: center;
		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-top: 8rpx;
		}
		.user-desc {
			display: flex;
			flex-direction: column;
			margin-left: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #fff;
			text {
				padding: 4rpx 0;
			}
		}
		.login-text {
			color: #fff;
			font-size: 32rpx;
			margin-left: 30rpx;
			padding: 14rpx;
		}
	}
}

// 操作列表
.user-list {
	padding: 0 40rpx;
	margin-top: 40rpx;
	.item {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
	}
}

.van-button {
	width: 90% !important;
	margin-top: 50rpx;
}
</style>
